<div class="page" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <!--主提组件-->
    <div class="bd">
        <th:block th:each="pageComponent:${pageComponents}">
            <th:block th:switch="${pageComponent.type}">
                <!--搜索框模块-->
                <th:block th:case="search">
                    <div class="weui-search-bar" style="position: fixed;width: 100%;z-index: 500">
                        <th:block th:each="child:${pageComponents}">
                            <th:block th:if="${child.type == 'qr_code'}">
                                <a class="fas fa-qrcode weui-search-bar__detail open-qrscan"
                                   style="line-height: 32px" th:data-name="${child.getColumnsString()}"></a>
                            </th:block>
                        </th:block>
                        <!--输入框-->
                        <div class="weui-search-bar__form ">
                            <div class="weui-search-bar__box">
                                <i class="weui-icon-search"></i>
                                <input th:name="${pageComponent.getColumnsString()}" class="weui-search-bar__input"
                                       placeholder="搜索">
                                <a href="javascript:" class="weui-icon-clear"></a>
                            </div>
                            <label class="weui-search-bar__label"
                                   style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                                <i class="weui-icon-search"></i>
                                <span>搜索</span>
                            </label>
                        </div>
                        <a href="javascript:" class="weui-search-bar__cancel-btn">取消</a>

                        <th:block th:each="child:${pageComponents}">
                            <th:block th:if="${child.type == 'detail_search'}">
                                <!--过滤器-->
                                <a class="fas fa-filter weui-search-bar__detail open-popup" style="line-height: 32px"
                                   data-target="#test"></a>
                                <div id="test" class="weui-popup__container popup-bottom" style="margin-bottom: 50px">
                                    <div class="weui-popup__overlay"></div>
                                    <div class="weui-popup__modal">
                                        <div class="toolbar">
                                            <div class="toolbar-inner">
                                                <a href="javascript:;" class="picker-button close-popup">关闭</a>
                                                <a href="javascript:;"
                                                   class="picker-button__left weui-search-detail__btn">搜索</a>
                                                <h1 class="title">过滤器</h1>
                                            </div>
                                        </div>
                                        <div class="modal-content">
                                            <form>
                                                <div class="weui-cells" style="background: #EFEFF4">
                                                    <th:block th:each="column:${child.columns}">
                                                        <th:block th:switch="${column.editType}">
                                                            <!--选择列表-->
                                                            <div th:case="choose_list"
                                                                 class="weui-cell weui-cell_select weui-cell_select-after">
                                                                <div class="weui-cell__hd">
                                                                    <label for="" th:text="${column.describe}"
                                                                           class="weui-label">国家/地区</label>
                                                                </div>
                                                                <div class="weui-cell__bd">
                                                                    <select class="weui-select"
                                                                            th:name="${column.name}">
                                                                        <option value="">无限制</option>
                                                                        <option th:each="col:${column.data}"
                                                                                th:value="${col.get('id')}"
                                                                                th:text="${col.get(column.getLinkColumn().name)}">
                                                                            中国
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <!--数字列表-->
                                                            <div th:case="number" class="weui-cell">
                                                                <div class="weui-cell__hd"><label
                                                                        th:text="${column.describe}" class="weui-label">qq</label>
                                                                </div>
                                                                <div class="weui-cell__bd">
                                                                    <input th:name="${column.name}" class="weui-input"
                                                                           type="number" pattern="[0-9]*"
                                                                           placeholder="请输入数字">
                                                                </div>
                                                            </div>

                                                            <!--日期列表-->
                                                            <div th:case="date" class="weui-cell">
                                                                <div class="weui-cell__hd"><label
                                                                        th:text="${column.describe}" for=""
                                                                        class="weui-label">日期</label></div>
                                                                <div class="weui-cell__bd">
                                                                    <input th:name="${column.name}" class="weui-input"
                                                                           type="date" value="">
                                                                </div>
                                                            </div>

                                                            <!--开关列表-->
                                                            <div th:case="switch" class="weui-cell weui-cell_switch">
                                                                <div th:text="${column.describe}" class="weui-cell__bd">
                                                                    标题文字
                                                                </div>
                                                                <div class="weui-cell__ft">
                                                                    <input th:name="${column.name}" class="weui-switch"
                                                                           type="checkbox">
                                                                </div>
                                                            </div>

                                                            <!--选择列表-->
                                                            <div th:case="select"
                                                                 class="weui-cell weui-cell_select weui-cell_select-after">
                                                                <div class="weui-cell__hd">
                                                                    <label for="" th:text="${column.describe}"
                                                                           class="weui-label">国家/地区</label>
                                                                </div>
                                                                <div class="weui-cell__bd">
                                                                    <select class="weui-select"
                                                                            th:name="${column.name}">
                                                                        <option value="">无限制</option>
                                                                        <option th:each="col:${column.data}"
                                                                                th:value="${col.get('id')}"
                                                                                th:text="${col.get(column.getLinkColumn().name)}">
                                                                            中国
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <!--文本列表-->
                                                            <div th:case="text" class="weui-cell">
                                                                <div class="weui-cell__bd">
                                                                    <input th:name="${column.name}" class="weui-input"
                                                                           type="text"
                                                                           th:placeholder="${column.describe}">
                                                                </div>
                                                            </div>
                                                        </th:block>
                                                    </th:block>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </th:block>
                        </th:block>
                    </div>
                    <div class="weui-flex" style="z-index: 200;height: 48px">
                        <div class="weui-flex__item">
                            <div class="placeholder">weui</div>
                        </div>
                    </div>
                </th:block>
                <!--表格模块-->
                <div th:case="table" class="weui-cells">
                    <th:block th:switch="${table.dispalyType}">

                        <th:block th:case="instruction_list">
                            <!--带说明的文字组件-->
                            <div th:each="item:${pageComponent.data}" class="weui-cell">
                                <div class="weui-cell__bd">
                                    <p th:text="${pageComponent.columns.get(1).hasLinkId()}?${pageComponent.columns.get(1).getLinkValue(item.get(pageComponent.columns.get(1).name))}:${item.get(pageComponent.columns.get(1).name)}">标题文字</p>
                                </div>
                                <div th:text="${pageComponent.columns.get(2).hasLinkId()}?${pageComponent.columns.get(2).getLinkValue(item.get(pageComponent.columns.get(2).name))}:${item.get(pageComponent.columns.get(2).name)}" class="weui-cell__ft">
                                    说明文字
                                </div>
                            </div>
                        </th:block>

                        <th:block th:case="instruction_jump_list">
                            <!--带说明、跳转的组件-->
                            <a th:each="item:${pageComponent.data}" class="weui-cell weui-cell_access weui-click__go"
                               href="javascript:;" data-go="inside_load"
                               th:data-url="${'edit?pageId='+ pageComponent.editId+'&id='+item.get(pageComponent.columns.get(0).name)}">
                            <div class="weui-cell__bd">
                                    <p th:text="${pageComponent.columns.get(1).hasLinkId()}?${pageComponent.columns.get(1).getLinkValue(item.get(pageComponent.columns.get(1).name))}:${item.get(pageComponent.columns.get(1).name)}">cell standard</p>
                                </div>
                                <div th:text="${pageComponent.columns.get(2).hasLinkId()}?${pageComponent.columns.get(2).getLinkValue(item.get(pageComponent.columns.get(2).name))}:${item.get(pageComponent.columns.get(2).name)}" class="weui-cell__ft">
                                    说明文字
                                </div>
                            </a>
                        </th:block>

                        <th:block th:case="jump_list">
                            <!--跳转组件-->
                            <a th:each="item:${pageComponent.data}" class="weui-cell weui-cell_access weui-click__go"
                               href="javascript:;" data-go="inside_load"
                               th:data-url="${'edit?pageId='+ pageComponent.editId+'&id='+item.get(pageComponent.columns.get(0).name)}">
                                <div class="weui-cell__bd">
                                    <p th:text="${pageComponent.columns.get(1).hasLinkId()}?${pageComponent.columns.get(1).getLinkValue(item.get(pageComponent.columns.get(1).name))}:${item.get(pageComponent.columns.get(1).name)}">cell standard</p>
                                </div>
                                <div class="weui-cell__ft">
                                </div>
                            </a>
                        </th:block>

                        <th:block th:case="img_list">
                            <!--带图标、文字、说明的组件-->
                            <div th:each="item:${pageComponent.data}" class="weui-cell weui-cell_example">
                                <div class="weui-cell__hd"><img
                                        th:src="${pageComponent.columns.get(1).hasLinkId()}?${pageComponent.columns.get(1).getLinkValue(item.get(pageComponent.columns.get(1).name))}:${item.get(pageComponent.columns.get(1).name)}"
                                        alt="" style="width:20px;margin-right:16px;display:block"></div>
                                <div class="weui-cell__bd">
                                    <p th:text="${pageComponent.columns.get(2).hasLinkId()}?${pageComponent.columns.get(2).getLinkValue(item.get(pageComponent.columns.get(2).name))}:${item.get(pageComponent.columns.get(2).name)}">标题文字</p>
                                </div>
                                <div th:text="${item.get(pageComponent.columns.get(3).name)}" class="weui-cell__ft">
                                    说明文字
                                </div>
                            </div>
                        </th:block>

                        <th:block th:case="img_jump_list">
                            <!--带图标说明文字的跳转组件-->
                            <a th:each="item:${pageComponent.data}" class="weui-cell weui-cell_access weui-cell_example"
                               href="javascript:;" data-go="inside_load"
                               th:data-url="${'edit?pageId='+ pageComponent.editId+'&id='+item.get(pageComponent.columns.get(0).name)}">
                                <div class="weui-cell__hd"><img
                                        th:src="${pageComponent.columns.get(1).hasLinkId()}?${pageComponent.columns.get(1).getLinkValue(item.get(pageComponent.columns.get(1).name))}:${item.get(pageComponent.columns.get(1).name)}"
                                        alt="" style="width:20px;margin-right:16px;display:block"></div>
                                <div class="weui-cell__bd">
                                    <p th:text="${pageComponent.columns.get(2).hasLinkId()}?${pageComponent.columns.get(2).getLinkValue(item.get(pageComponent.columns.get(2).name))}:${item.get(pageComponent.columns.get(2).name)}">cell standard</p>
                                </div>
                                <div th:text="${pageComponent.columns.get(3).hasLinkId()}?${pageComponent.columns.get(3).getLinkValue(item.get(pageComponent.columns.get(3).name))}:${item.get(pageComponent.columns.get(3).name)}" class="weui-cell__ft">
                                    说明文字
                                </div>
                            </a>
                        </th:block>

                        <th:block th:case="contact_list">
                            <!--联系人列表组件-->
                            <div th:each="item:${pageComponent.data}" class="weui-cell">
                                <div class="weui-cell__hd" style="position: relative;margin-right: 10px;">
                                    <img th:src="${pageComponent.columns.get(1).hasLinkId()}?${pageComponent.columns.get(1).getLinkValue(item.get(pageComponent.columns.get(1).name))}:${item.get(pageComponent.columns.get(1).name)}"
                                         style="width: 50px;display: block">
                                </div>
                                <div class="weui-cell__bd">
                                    <p th:text="${pageComponent.columns.get(2).hasLinkId()}?${pageComponent.columns.get(2).getLinkValue(item.get(pageComponent.columns.get(2).name))}:${item.get(pageComponent.columns.get(2).name)}">联系人名称</p>
                                    <p th:text="${pageComponent.columns.get(3).hasLinkId()}?${pageComponent.columns.get(3).getLinkValue(item.get(pageComponent.columns.get(3).name))}:${item.get(pageComponent.columns.get(3).name)}"
                                       style="font-size: 13px;color: #888888;">摘要信息</p>
                                </div>
                            </div>
                        </th:block>

                        <th:block th:case="article">
                            <!--文章组件-->
                            <article th:each="item:${pageComponent.data}" class="weui-article">
                                <h1 th:text="${pageComponent.columns.get(1).hasLinkId()}?${pageComponent.columns.get(1).getLinkValue(item.get(pageComponent.columns.get(1).name))}:${item.get(pageComponent.columns.get(1).name)}">大标题</h1>
                                <section>
                                    <h2 th:text="${pageComponent.columns.get(2).hasLinkId()}?${pageComponent.columns.get(2).getLinkValue(item.get(pageComponent.columns.get(2).name))}:${item.get(pageComponent.columns.get(2).name)}" class="title">
                                        章标题</h2>
                                    <section>
                                        <h3 th:text="${pageComponent.columns.get(3).hasLinkId()}?${pageComponent.columns.get(3).getLinkValue(item.get(pageComponent.columns.get(3).name))}:${item.get(pageComponent.columns.get(3).name)}">1.1 节标题</h3>
                                        <p th:text="${pageComponent.columns.get(4).hasLinkId()}?${pageComponent.columns.get(4).getLinkValue(item.get(pageComponent.columns.get(4).name))}:${item.get(pageComponent.columns.get(4).name)}">
                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                                            consequat.
                                        </p>
                                    </section>
                                </section>
                            </article>
                        </th:block>
                    </th:block>
                </div>
            </th:block>
        </th:block>
    </div>
</div>